@color_success: rgba(64, 158, 63, 1);
@color_error: rgba(219, 82, 75, 1);
@color_warning: rgba(238, 152, 0, 1);
@color_info: rgba(38, 175, 215, 1);
@color_primary: rgba(36, 95, 146, 1);
@color_red: rgba(243, 51, 69, 1);

@ca: #222;
@cb: #108ee9;// 108ee9 & 3399CC
@fa: #444;

//函数
.pre(@style,@value){
    -webkit-@{style}: @value;/*webkit浏览器*/
       -moz-@{style}: @value;/*火狐*/
        -ms-@{style}: @value;/*IE10*/
         -o-@{style}: @value;/*IE10*/
            @{style}: @value;
}
.border-radius(@radius:5px) {
  .pre(border-radius,@radius);
}
.border-radius-all(@lu:5px,@ru:5px,@rd:5px,@ld:5px) {
  .pre(border-radius,@lu @ru @rd @ld);
}
.no-select(@word:none) {
  .pre(user-select,@word);
  -khtml-user-select: @word;/*早期浏览器*/
}
.appearance {
  .pre(appearance,none);
}
.transparent(@num:.5) {
  opacity: @num;
  filter: alpha(opacity=@num);
  -moz-opacity: @num;
  -khtml-opacity: @num;
}
.box-sizing(@word:border-box) {
  -webkit-box-sizing: @word; /* Safari */
  -moz-box-sizing: @word; /* Firefox */
  box-sizing: @word;
}
.box-shadow(@word) {
  -webkit-box-shadow: @word;/*webkit*/
  -moz-box-shadow: @word;/*firefox*/
  box-shadow: @word;/*opera或ie9*/
}
.sline(@left:5px) {
  position: relative;
  border-bottom: none;

  &:after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: @left;
    height: 1px;
    content: ' ';
    background: #ccc;
  }
}
.ellipsis(@line:1) {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: @line;
  -webkit-box-orient: vertical;
}
.flex(@size:1) {
  -webkit-box-flex: @size;
  -moz-box-flex: @size;
  -webkit-flex: @size;
  -ms-flex: @size;
  flex: @size;
}
.display-flex {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.transition(@time:.5s) {
  -webkit-transition: all @time;
  transition: all @time;
}
.transform(@word) {
  -webkit-transform: @word;
  -moz-transform: @word;  /* Firefox */
  -ms-transform: @word;   /* IE 9 */
  -o-transform: @word;  /* Opera */
  transform: @word;
}
.fixed-full() {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.animation(@word) {
  animation: @word;
}
.filter(@word) {
  -webkit-filter: @word;
  filter: @word;
}
.after-filter(@bx:0, @by:0, @ex:right, @ey:0, @bc:rgba(0, 0, 0, .5), @ec:rgba(0, 0, 0, 0)) {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
  background: -webkit-gradient(linear, @bx @by, @ex @ey, from(@bc), to(@ec));
}
.hide {
  pointer-events: none;
  opacity: 0;
}
.show {
  pointer-events: auto;
  opacity: 1;
}
.magic-color(@bg:@ca) when (lightness(@bg) >= 80%) {
  color: #000;
}
.magic-color(@bg:@ca) when (lightness(@bg) < 80%) {
  color: #fff;
}
.magic-color(@bg:@ca, @c:#191919) {
  cursor: pointer;
  background: @bg;
  // background-image: linear-gradient(to top, @bg+@c+@c 0%, @bg - @c - @c 100%);

  &:hover {
    background: @bg - @c;
    // background-image: linear-gradient(to top, @bg+@c 0%, @bg - @c * 3 100%);
  }
  &.selected {
    background: @bg - @c;
    // background-image: linear-gradient(to top, @bg+@c 0%, @bg - @c * 3 100%);
  }
  &:active {
    background: @bg - @c * 2;
    // background-image: linear-gradient(to top, @bg 0%, @bg - @c * 4 100%);
    .box-shadow(inset 0 0 20px 0 rgba(0, 0, 0, .1), 0 1px 0 rgba(0, 0, 0, .2););
  }
  &:disabled {
    cursor: not-allowed;
    opacity: .65;
    background: @bg + @c;
    // background-image: linear-gradient(to top, @bg+@c+@c + @c 0%, @bg - @c 100%);
  }
}
.outline-color(@color:@ca, @c:#090909) {
  cursor: pointer;
  color: #666;
  border: 1px solid #d9d9d9;
  background-color: rgba(255,255,255,0);
  &:hover {
    color: @color;
    border: 1px solid @color;
  }
  &.selected {
    border-color: @color - @c;
    color: @color - @c;
  }
  &:active {
    border-color: @color - @c * 2;
    color: @color - @c * 2;
  }
  &:disabled {
    cursor: not-allowed;
    opacity: .65;
    color: @color;
    border: 1px solid @color;
    background: #fff;
  }
}
.color-selector(@opacity:1) {
  &.success {
    color: #fff;
    background: rgba(64, 158, 63, @opacity);
  }
  &.error {
    color: #fff;
    background: rgba(219, 82, 75, @opacity);
  }
  &.warning {
    color: #fff;
    background: rgba(238, 152, 0, @opacity);
  }
  &.info {
    color: #fff;
    background: rgba(38, 175, 215, @opacity);
  }
  &.primary {
    color: #fff;
    background: rgba(36, 95, 146, @opacity);
  }
  &.red {
    color: #fff;
    background: rgba(243, 51, 69, @opacity);
  }
  &.red {
    color: #fff;
    background: rgba(28, 27, 32, @opacity);
  }
}
.magic-selector(@opacity:1) {
  .magic-color();

  &.success {
    .magic-color(rgba(64, 158, 63, @opacity));
  }
  &.error {
    .magic-color(rgba(219, 82, 75, @opacity));
  }
  &.warning {
    .magic-color(rgba(238, 152, 0, @opacity));
  }
  &.info {
    .magic-color(rgba(38, 175, 215, @opacity));
  }
  &.primary {
    .magic-color(rgba(36, 95, 146, @opacity));
  }
  &.red {
    .magic-color(rgba(243, 51, 69, @opacity));
  }
  &.blue {
    .magic-color(#3892e7);
  }
  &.yellow {
    .magic-color(#f4a23c);
  }
  &.lightblue {
    .magic-color(#7bc1cf);
  }
}
.outline-selector(@opacity:1) {
  .outline-color();

  &.success {
    .outline-color(rgba(64, 158, 63, @opacity));
  }
  &.error {
    .outline-color(rgba(219, 82, 75, @opacity));
  }
  &.warning {
    .outline-color(rgba(238, 152, 0, @opacity));
  }
  &.info {
    .outline-color(rgba(38, 175, 215, @opacity));
  }
  &.primary {
    .outline-color(rgba(36, 95, 146, @opacity));
  }
  &.red {
    .outline-color(rgba(243, 51, 69, @opacity));
  }
  &.blue {
    .outline-color(#3892e7);
  }
  &.yellow {
    .outline-color(#f4a23c);
  }
  &.lightblue {
    .outline-color(#7bc1cf);
  }
}